<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../kaoqin.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" href="../../../css/zyUpload.css" type="text/css">
		<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script src="../../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#content {
				padding-top: 1.3rem;
				padding-bottom: 1rem;
			}
			body{
				background-color: white;
			}
			
			/*样式*/
			#qingjia{
				display: block;
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				position: absolute;
			    right: 0.333333rem;
			    top: 0.3rem;
    			padding: 0 0.2rem;
			    border: 1px solid #E93440;
			    border-radius: 0.555555rem;
			    color: #E93440;
			    margin: 0;
			}
			#qingjia:active{
				color: white;
				background-color: #E93440;
			}
			.daka_top{
				background-color: #F5F5F5;
				padding: 0.625rem 0;
			}
			.time_box1{
				width: 3.055555rem;
				height: 3.055555rem;
				margin: 0 auto;
				border-radius: 3.055555rem;
				background-color: #8eaeec;
			}
			.time_box2{
				width: 2.777777rem;
				height: 2.777777rem;
				float: left;
				margin-left: 0.138888rem;
				margin-top: 0.138888rem;
				border-radius: 2.777777rem;
				background-color: #356eee;
				color: white;
				text-align: center;
			}
			.time_box2 h3{
				font-size: 0.5rem;
				margin: 0;
				width: 100%;
				float: left;
				margin-top: 0.9rem;
			}
			.time_box2 p{
				clear: both;
				margin: 0;
				font-size: 0.333333rem;
			}
			.daka_middle{
				padding:0.4rem 0.3rem;
				color: #555555;
			}
			.banci h4{
				font-size: 0.38rem;
				font-weight: 500;
				margin: 0;
				margin-bottom: 0.277777rem;
			}
			.banci li{
				font-size: 0.38rem;
				text-indent: 5em;
				margin-bottom: 0.277777rem;
			}
			.wifi h4{
				font-size: 0.38rem;
				font-weight: 500;
				margin: 0;
				margin-bottom: 0.277777rem;
			}
			.wifi li{
				font-size: 0.38rem;
				text-indent: 5em;
				margin-bottom: 0.277777rem;
			}
			.weizhi h4{
				font-size: 0.38rem;
				font-weight: 500;
				margin: 0;
				margin-bottom: 0.277777rem;
			}
			.weizhi li{
				font-size: 0.38rem;
				text-indent: 5em;
				margin-bottom: 0.277777rem;
			}
			.qita h4{
				font-size: 0.38rem;
				font-weight: 500;
				margin: 0;
				margin-bottom: 0.277777rem;
			}
			.qita li{
				font-size: 0.38rem;
				text-indent: 3em;
				margin-bottom: 0.277777rem;
			}
			.qita p{
				font-size: 0.38rem;
				font-weight: 500;
				margin: 0;
				margin-bottom: 0.277777rem;
				line-height: 0.38rem;
				text-indent: 4em;
			}
			.kqdk_btn{
				width: 100%;
				height: 1.361111rem;
				position: fixed;
				bottom: 0;
				margin: 0;
			}
			.kqdk_btn li{
				width: 50%;
				float: left;
				height: 1.361111rem;
				border-top: 1px solid #DBDBDB;
			}
			.kqdk_btn li a{
				display: block;
				height: 1.361111rem;
				line-height: 1.361111rem;
				font-size: 0.38rem;
				width: 100%;
				text-align: center;
			}
			.kqdk_btn li:nth-child(1) a{
				color: #E93440;
				background-color: white;
			}
			.kqdk_btn li:nth-child(2) a{
				color: white;
				background-color: #E93440;
			}
			.shangban, .xiaban{
				display: none;
			    background: #f1f1f1;
			    padding: 5px;
			    margin-bottom: 5px;
			}
		</style>
		<style type="text/css">
			.tan2{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0,0,0,0.3);
				display: none;
			}
			.tan3{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0,0,0,0.3);
				display: none;
			}
			.chenggong{
				width: 5.555555rem;
				height: 6.944444rem;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -3.472222rem;
				margin-left: -2.777777rem;
				background-color: #5c97f5;
				color: white;
			}
			.chenggong h3{
				text-align: center;
				padding-top: 1.111111rem;
			}
			.chenggong h4{
				margin-top: 1.111111rem;
				width: 3.055555rem;
				height: 1.111111rem;
				background-color: #eff3f6;
				color: black;
				margin: 0 auto;
				line-height: 1.111111rem;
			}
			.chenggong h4 span{
				display: block;
				float: left;
				width: 0.7rem;
				font-size: 0.38rem;
				text-align: center;
				line-height: 0.555555rem;
			}
			.chenggong h4 label{
				display: block;
				float: left;
			}
			.chenggong p{
				margin: 0;
				margin-top: 0.277777rem;
				text-align: center;
				font-size: 0.333333rem;
			}
			#know{
				display: block;
				width: 100%;
				text-align: center;
				margin-top: 1.111111rem;
				font-size: 0.333333rem;
				border: none;
				outline: none;
				border-top: 1px solid #DBDBDB;
				line-height: 1.111111rem;
				background-color: #5c97f5;
			}
		</style>
		<style type="text/css">
			.tan1{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #F2F2F2;
				display: none;
				padding-top: 1rem;
			}
			.demo{
				margin-top: 30% auto;
			}
			#tijiao{
				display: block;
				width: 2.777777rem;
				height: 0.833333rem;
				text-align: center;
				line-height: 0.833333rem;
				background-color: #199ed8;
				border: none;
				outline: none;
				color: white;
				font-size: 0.38rem;
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<div style="display: none;" id="atreId">0</div>
		<div style="display: none;" id="status">0</div>
		<div id="wrap">
			<div id="main">
				<div id="header">
					<a id="headImg" href="../index.html"><img class="headImg" src="../../../images/12.png" /></a>
					<p id="headTitle" style="font-size: 16px;">考勤打卡</p>
					<a id="qingjia" href="../qjwc/qjwc.html">请假外出</a>
				</div>
				<div id="content">
					<div class="daka_top">
						<a>
							
						</a>
						<div class="time_box1">
							
							<div class="time_box2" id="send">
								<h3></h3>
								<p></p>
							</div>
						</div>
					</div>
					<div class="daka_middle">

						<h3 id="menu-image">图像接口</h3>  
					      <span class="desc">拍照或从手机相册中选图接口</span>  
					      <button class="btn btn_primary" id="chooseImage">chooseImage</button>  
					      <span class="desc">预览图片接口</span>  
					      <button class="btn btn_primary" id="previewImage">previewImage</button>  
					      <span class="desc">上传图片接口</span>  
					      <button class="btn btn_primary" id="uploadImage">uploadImage</button>  
					      <span class="desc">下载图片接口</span>  
					      <button class="btn btn_primary" id="downloadImage">downloadImage</button>  
					   
					     <input name="mediaId" id="mediaId" type="hidden" value=""/>  

						<ul class="banci" id="banci">
							<h4><b>考勤班次</b></h4>
							<h4>今日班次：星期一</h4>
						</ul>
						<ul class="wifi" id="wifi">
							<h4><b>WiFi</b></h4>
							<h4>打卡WiFi列表</h4>
						</ul>
						<ul class="weizhi" id="weizhi">
							<h4><b>考勤地点</b></h4>
							<h4>打卡地点列表</h4>
						</ul>
						<ul class="qita" id="qita">							
							<h4><b>打卡记录时间和位置</b></h4>
							<!--<div class="shangban" id="shangban">
								<h4><b>上班打卡：</b></h4>
								<p>08:33:00</p>
								<h4>打卡位置：</h4>
								<h4>长春市市南四环金融服务中心2-401</h4>
							</div>							
							<div class="xiaban" id="xiaban">
								<h4><b>下班打卡：</b></h4>
								<p>08:33:00</p>
								<h4>打卡位置：</h4>
								<h4>长春市市南四环金融服务中心2-401</h4>
							</div>-->
						</ul>
					</div>
					<ul class="kqdk_btn">
						<li>
							<a href="kqdk.html">考勤打卡</a>
						</li>
						<li>
							<a href="dkrl.html">打卡日历</a>
						</li>
					</ul>
					<!--打卡弹窗-->

					<div class="tan1">
						<div id="demo" class="demo"></div>
						<input type="button" name="tijiao" id="tijiao" value="确定" />
					</div>
					<!--<div class="tan2">
						<div class="chenggong">
							<h3>打卡成功</h3>
							<h4><span id="daka">上班</span><label>08:30</label></h4>
							<p>打起精神开始工作</p>
							<input type="button" name="know" id="know" value="我知道了" />
						</div>
					</div>-->
				</div>
			</div>

		</div>

	</body>
	<script src="../../../js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/jquery.cookie.js" type="text/javascript"></script>
	<script src="../../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/handlebars-v2.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/rhAdmin.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引用核心层插件 -->
	<script src="../../../js/addpicture/zyFile.js"></script>
	<!-- 引用控制层插件 -->
	<script src="../../../js/addpicture/zyUpload2.js"></script>
	<!-- 引用初始化JS -->
	<script src="../../../js/addpicture/lanrenzhijia.js"></script>

	<!--js传值-->
	<!--<script>
	    $(function() {
	        $('#send').click(function() {
	        	var value = $('#value1').html();
	        	if(value=='3'){
	        		return null;
	        	}
	            var url = "kqdk-tc.html?value1="+value;
	            url=encodeURI(url);   //对URL的地址进行encodeURI编码，实际上只有中文的部分被修改编码
	            window.location.href=url;
	        });
	    });
	    
	    function getParam(name) {
	        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	        var r = window.location.search.substr(1).match(reg);
	        if (r != null)
	            return decodeURI(r[2]);   //对参数进行decodeURI解码
	        return null;
	    };
	    
	    $(function() {
	        var val2 = getParam("value1");
	        if(!val2=='null'){
	        	$('#value1').html(val2);
	        }
		    if(val2==2){
			    $('.time_box2 h3').html("下班打卡");
			    var data4=new Date();
				var data5=data4.toString().split(" ")[4];
				$('.shangban p').html(data5);
			    $('.shangban').show();			    
		    }
		    if(val2==3){
		    	$('.time_box2 h3').html("打卡完成");
		    	$('.time_box1').css("background-color","#cbcbcb");
				$('.time_box2').css("background-color","#6b6b6b");
				var data4=new Date();
				var data5=data4.toString().split(" ")[4];
				$('.shangban p').html(data5);
				$('.shangban').show();
				
				
				$('#daka').html('下班')
				var data5=new Date();
				var data6=data5.toString().split(" ")[4];
				$('.xiaban p').html(data6);
//				var data4=new Date();
//					var data5=data4.toString().split(" ")[4];
//					$('.xiaban p').html(data5);
				$('.xiaban').show();
				
				
		    }
	    });	    
	</script>-->

	<script type="text/javascript">
		var tokenzb = $.cookie("tokenRh");
		var memberId;
		if(!tokenzb) {
			window.location.href = "../../login/login/login.html";
		}
		$(function(){
			currentyf(tokenzb);
			
			$.ajax({
					cache: false,
					type: "GET",
					url: "http://10.0.47.157:5555/attencepoint-service/tfAttenceRecordByMember?memberId=1&biId=1",
					dataType: "JSON",
					async: false,
					error: function(error) {
						$.removeCookie('tokenzb', {
							expires: 7,
							path: '/'
						});
					},
					success: function(data) {
						var notice = "不必打卡";
						if(data.tfAttenceRecord!=''){
							for (var i = 0;i < data.tfAttenceRecord.length;i++) {								 
								$("#banci").append("<li>"+"["+data.tfAttenceRecord[i].atreOrder+"]上班:"+data.tfAttenceRecord[i].atreStartStandardTime+"</li>");
								$("#banci").append("<li>"+"["+data.tfAttenceRecord[i].atreOrder+"]下班:"+data.tfAttenceRecord[i].atreEndStandardTime+"</li>");
								if(data.tfAttenceRecord[i].atreSpare1=='N'){
									$("#banci").append("<h4 style='color: #f00;'>注:班次["+data.tfAttenceRecord[i].atreOrder+"]下班不打卡不算考勤异常</h4>");									
								}
								
								if(data.tfAttenceRecord[i].atreStartStatus!='0'){
									$("#qita").append("<h4><b>"+data.tfAttenceRecord[i].atreOrder+"班次上班打卡：</b></h4>");
									$("#qita").append("<p>"+data.tfAttenceRecord[i].atreStartTime+"</p>");
									$("#qita").append("<h4>打卡位置：</h4>");
									$("#qita").append("<h4>"+data.tfAttenceRecord[i].atreStartAdd+"</h4>");
								}
								
								if(data.tfAttenceRecord[i].atreEndStatus!='0'){
									$("#qita").append("<h4><b>"+data.tfAttenceRecord[i].atreOrder+"班次下班打卡：</b></h4>");
									$("#qita").append("<p>"+data.tfAttenceRecord[i].atreEndTime+"</p>");
									$("#qita").append("<h4>打卡位置：</h4>");
									$("#qita").append("<h4>"+data.tfAttenceRecord[i].atreEndAdd+"</h4>");
								}
								
								if(notice == "不必打卡"){
									if(data.tfAttenceRecord[i].atreStartStatus=='0'){
										notice = "["+data.tfAttenceRecord[i].atreOrder+"]上班打卡";
										$('#atreId').html(data.tfAttenceRecord[i].atreId);
										$('#status').html("0");
									}else if(data.tfAttenceRecord[i].atreStartStatus!='0' && data.tfAttenceRecord[i].atreEndStatus=='0' && data.tfAttenceRecord[i].atreSpare1=='Y'){
										notice = "["+data.tfAttenceRecord[i].atreOrder+"]下班打卡";
										$('#atreId').html(data.tfAttenceRecord[i].atreId);
										$('#status').html("1");
									}
								}
								
							}								
								
							if(data.tfAttencePlace!='null'){
								for (var i = 0;i < data.tfAttencePlace.length;i++) {
									$("#weizhi").append(" <li>"+data.tfAttencePlace[i].atplName+"</li>");
								}
							}
							if(data.tfAttenceWifi!='null'){
								for (var i = 0;i < data.tfAttenceWifi.length;i++) {
									$("#wifi").append(" <li>"+data.tfAttenceWifi[i].awfName+"</li>");
								}
							}
							$('.time_box2').css("background-color","blue");
							$('.time_box2 h3').html(notice);
						}else{
							$('.time_box2').css("background-color","#6b6b6b");
							$('.time_box2 h3').html(notice);
						}
					}
				});
				
			
			
			//首先根据会员的cookie取得会员id
			//打卡时间
			var timer1=setInterval(function(){
				var data=new Date();
				var data1=data.toString().split(" ")[4];
				$('.time_box2 p').html(data1);
			},1000)


			//今日班次
			var data2=new Date();
			var data3=data2.toString().split(" ")[0];
			switch (data3){
				case "Mon":
					$('.banci h4:nth-child(2)').html("今日班次：星期一");
					break;
				case "Tue":
					$('.banci h4:nth-child(2)').html("今日班次：星期二");
					break;
				case "Wed":
					$('.banci h4:nth-child(2)').html("今日班次：星期三");
					break;
				case "Thu":
					$('.banci h4:nth-child(2)').html("今日班次：星期四");
					break;
				case "Fri":
					$('.banci h4:nth-child(2)').html("今日班次：星期五");
					break;
				case "Sat":
					$('.banci h4:nth-child(2)').html("今日班次：星期六");
					break;
				case "Sun":
					$('.banci h4:nth-child(2)').html("今日班次：星期日");
					break;
				default:
					break;
			}			
		})
		$(function() {
	        $('#send').click(function() {
	        	var atreId = $('#atreId').html();
	        	var status = $('#status').html();
	            var url = "kqdk-tc.html?atreId="+atreId+"&status="+status;
	            url=encodeURI(url);   //对URL的地址进行encodeURI编码，实际上只有中文的部分被修改编码
	            window.location.href=url;
	        });
	    });
		
		//获取会员id
		function currentyf(tokenzb) {
				$.ajax({
					cache: false,
					type: "GET",
					url: "http://47.104.13.109/member-service/member/mine/member?token=" + tokenzb,
					dataType: "JSON",
					async: false,
					error: function(error) {
						$.removeCookie('tokenzb', {
							expires: 7,
							path: '/'
						});
					},
					success: function(data) {
						console.log(data);
						memberId = data.id;
						//再根据会员id判断用户jecket是否存在
						judgeJecket(memberId);
					}
				});
			}
		
		function judgeJecket(memberId){
			$.ajax({
				cache: false,
				type: "GET",
				url: "http://47.104.13.109/pay-service/getarea?memberId="+memberId,
				async: false,
				success: function(data4) {
					if(data4 != "success"){
						dingwei(memberId);
					}else{
						shouquan(memberId);
					}
				}
			});
		}
		function shouquan(memberId){
			$.get("http://47.104.13.109/pay-service/getOpenId4?memberId="+memberId, {
				rediretUrl:location.href
			}, function(data) {
				//alert(data.url);
				if(data != ""){
					$("#wxForm").prop("action",data.url);
					$("#wxForm").submit();
				}
			},"json");
		}
		function dingwei(memberId){
			var urlf = window.location.href;
			var newUrl = "http://47.104.13.109/pay-service/getJSSDK?memberId=" + memberId + "&url="+urlf;
			//alert(newUrl);
			$.ajax({
				cache: false,
				type: "GET",
				url: newUrl,
				dataType: "JSON",
				async: false,
				success: function(data2) {
					console.log(data2.appId);
					console.log(data2.timestamp);
					console.log(data2.noncestr);
					console.log(data2.signature);
					wx.config({
					   	 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					    appId: data2.appId, // 必填，公众号的唯一标识
					    timestamp: data2.timestamp, // 必填，生成签名的时间戳
					    nonceStr: data2.noncestr, // 必填，生成签名的随机串
					    signature: data2.signature,// 必填，签名，见附录1
					    jsApiList: ['chooseImage',  
				       'previewImage',  
				       'uploadImage',  
				       'downloadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					
					wx.ready(function () {  
				       
				    // 5 图片接口  
				      // 5.1 拍照、本地选图  
				      var images = {  
				        localId: [],  
				        serverId: []  
				      };  
				      document.querySelector('#chooseImage').onclick = function () {  
				        wx.chooseImage({  
				          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    					  sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
				          success: function (res) {
				            images.localId = res.localIds;  
				            alert('已选择 ' + res.localIds.length + ' 张图片');  
				          }  
				        });  
				      };  
				  
				      // 5.2 图片预览  
				      document.querySelector('#previewImage').onclick = function () {  
				        wx.previewImage({  
				          current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',  
				          urls: [  
				            'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',  
				            'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',  
				            'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'  
				          ]  
				        });  
				      };  
				  
				      // 5.3 上传图片  
				      document.querySelector('#uploadImage').onclick = function () {  
				        if (images.localId.length == 0) {  
				          alert('请先使用 chooseImage 接口选择图片');  
				          return;  
				        }  
				        var i = 0, length = images.localId.length;  
				        images.serverId = [];  
				        function upload() {  
				          wx.uploadImage({  
				            localId: images.localId[i],  
				            success: function (res) {  
				              i++;  
				              //alert('已上传：' + i + '/' + length);  
				              images.serverId.push(res.serverId);  
				              if (i < length) {  
				                upload();  
				              }  
				            },  
				            fail: function (res) {  
				              alert(JSON.stringify(res));  
				            }  
				          });  
				        }  
				        upload();  
				      };  
				  
				      // 5.4 下载图片  
				      document.querySelector('#downloadImage').onclick = function () {  
				        if (images.serverId.length === 0) {  
				          alert('请先使用 uploadImage 上传图片');  
				          return;  
				        }  
				        var i = 0, length = images.serverId.length;  
				        images.localId = [];  
				        function download() {  
				          wx.downloadImage({  
				            serverId: images.serverId[i],  
				            success: function (res) {  
				              i++;  
				              alert('已下载：' + i + '/' + length);  
				              images.localId.push(res.localId);  
				              if (i < length) {  
				                download();  
				              }  
				            }  
				          });  
				        }  
				        download();  
				      };  
				        
				  });	
						 
					wx.error(function(res){
				    });
				}
			});
		}
	</script>

</html>